<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>酒店详情信息</title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}

			a {
				text-decoration: none;
			}

			ul {
				list-style: none;
			}

			.center {
				width: 1000px;
				margin: 0 auto;
			}

			body {
				background-color: #66ACF2;
			}

			.show .center {
				display: flex;
				box-shadow: 0 5px 20px rgba(0, 0, 0, .3);
				margin-top: 10px;
			}

			.show .col1-1 img {
				display: block;
				width: 470px;
				height: 300px;
			}

			.show .col1-2 {
				background-color: #fff;
				padding: 15px;
			}

			.show .col1-2 h3 {
				color: #636363;
				font-size: 24px;
			}

			.show .col1-2 .price h3 {
				color: #f00;
				font-size: 20px;
				margin: 10px;
			}

			.show .col1-2>div {
				display: flex;
				align-items: center;
				font-size: 14px;
				width: 500px;
			}

			.show .col1-2 div>p {
				color: #949494;
				padding-left: 5px;
				line-height: 30px;
			}

			.show .col1-2 .icon1 {
				width: 30px;
				height: 30px;
				background: url(img/icon.png) no-repeat -450px -295px;
			}

			.show .col1-2 .icon2 {
				width: 30px;
				height: 30px;
				background: url(img/icon.png) no-repeat -450px -319px;

			}

			.show .col1-2 .icon3 {
				width: 30px;
				height: 30px;
				background: url(img/icon.png) no-repeat -450px -350px;
			}

			.show .col1-2 .icon4 {
				width: 30px;
				height: 30px;
				background: url(img/icon.png) no-repeat -450px -405px;
			}

			.show .col1-2 div:last-child .last .icon4 {
				float: left;
			}

			.show .col1-2 div:last-child .last h4 {
				float: left;
				line-height: 30px;
			}

			/*******************酒店介绍区*********************/
			.introduce .center {
				background-color: #fff;
				margin-top: 15px;
			}

			.introduce .icon,
			.facility .icon,
			.review .icon {
				display: flex;
				justify-content: left;
				font-size: 20px;
				padding: 10px 5px 5px 0;
			}

			.introduce .icon span,
			.facility .icon span, 
			.review .icon span {
				display: block;
				background-color: #62E1D9;
				color: #fff;
				width: 100px;
				padding: 5px;
				box-sizing: border-box;
			}

			.introduce .icon div,
			.facility .icon div,
			.review .icon div {
				width: 0;
				border: 20px solid #62E1D9;
				border-right-color: transparent;
			}

			.introduce p {
				text-indent: 2em;
				padding: 20px 50px;
				color: #555;
				line-height: 2em;
			}

			.introduce img {
				width: 80%;
				display: block;
				margin: 0 auto;
				height: 500px;
			}

			/**************酒店设施区********************/
			.facility .center {
				background-color: #fff;
				margin-top: 15px;
			}

			.facility .icon span {
				background-color: #008AFF;
			}

			.facility .icon div {
				border-color: #008AFF;
				border-right-color: transparent;
			}

			.facility ul {
				display: flex;
				justify-content: space-evenly;
				padding-bottom: 30px;
				color: #555;
			}

			.facility ul li {
				width: 100px;
				margin: 10px;
				display: flex;
				justify-content: center;
				align-items: center;
			}

			.facility ul li div {
				width: 30px;
				height: 30px;
				background: url(img/icon.png) no-repeat -260px -440px;
			}
			/****************用户评价区******************/
			.review .center {
				background-color: #fff;
				margin-top: 15px;
			}
			.review ul li {
				padding: 20px;
				border-bottom: 1px dashed #aaa;
			}
			.review ul li img {
				display: block;
				width: 30px;
				height: 30px;
				border-radius: 15px;
			}
			.review ul li p {
				color: #555;
				line-height: 2em;
			}
			.review ul li p:last-child {
				color: #9F9F9F;
			}
			.review ul li textarea {
				resize: none;
				outline: none;
				width: 200px;
				line-height: 20px;
				border: 0;
				color: #aaa;
				background-color: #F8F8F8;
			}
		</style>
	</head>
	<body>
		<div class="nav">
			<iframe src="nav.html" frameborder="0" width="100%" height="100px" scrolling="no"></iframe>
		</div>
		<div class="show">
			<div class="center">
				<div class="col1-1">
					<img src="img/hotel/1.jpg">
				</div>
				<div class="col1-2">
					<div>
						<h3>舟山喜来登绿城酒店</h3>
					</div>
					<div class="price">
						<h3>￥160起</h3>
					</div>
					<div>
						<div class="icon1"></div>
						<h4>地址：</h4>
						<p>舟山市临城新区千岛路101号</p>
					</div>
					<div>
						<div class="icon2"></div>
						<h4>联系电话：</h4>
						<p>(86)(580) 2088888</p>
					</div>
					<div>
						<div class="icon3"></div>
						<h4>营业时间：</h4>
						<p>全天</p>
					</div>
				</div>
			</div>
		</div>
		<!-- 酒店介绍 -->
		<div class="introduce">
			<div class="center">
				<div class="icon">
					<span>酒店介绍</span>
					<div></div>
				</div>

				<p>气势宏伟的舟山喜来登绿城酒店坐落于舟山市繁华的新兴中央商务区，热诚恭迎商务和休闲旅客的光临。蓬勃发展的舟山市以其造船业和水产业著称，是从上海、杭州、宁波等周边城市出游的理想目的地。位于酒店东边的普陀山是中国四大佛教名山之一，同时也是著名的朝圣之地。酒店西边则是定海，这里是古城中心，旧时代政府的建筑仍保留着原貌，十分引人入胜。
				</p>
				<img src="img/hotel/hotel_show/2.jpg" alt="">
				<p>酒店共拥有 398 间宽敞客房，每间客房都可欣赏到山海胜景。喜来登甜梦之床（Sweet
					Sleeper™）配有清爽的棉床单、柔软的羽绒被和舒适的羽绒枕，将令您享受到前所未有的甜美睡眠。在我们的特色餐厅中任选一家，与亲友们共享美味可口的意大利佳肴、粤菜或当地美食，或来到大堂吧中细细品味鸡尾酒放松身心。还可在我们的室内和室外泳池中尽情畅游、焕发活力。
					或是在水疗中心和美容沙龙让理疗师的双手为您送上抚慰。　</p>
				<img src="img/hotel/hotel_show/4.jpg" alt="">
				<p>无论是小型商务会议还是特别的盛大招待会，我们的专业团队都将为您打造心目中的完美活动。 酒店的会议空间面积共达 4,200
					平米，包括一间面积1500平方米，高10米的豪华宴会厅和十间多功能厅，是您举办下次活动的理想场所。

				</p>
			</div>
		</div>
		<!-- 酒店设施 -->
		<div class="facility">
			<div class="center">
				<div class="icon">
					<span>酒店设施</span>
					<div></div>
				</div>
				<ul>
					<li>
						<div></div>
						<span>WiFi</span>
					</li>
					<li>
						<div></div>
						<span>早餐</span>
					</li>
					<li>
						<div></div>
						<span>叫醒服务</span>
					</li>
					<li>
						<div></div>
						<span>免费停车</span>
					</li>
					<li>
						<div></div>
						<span>会议室</span>
					</li>
				</ul>
			</div>
		</div>
		<!-- 用户评价 -->
		<div class="review">
			<div class="center">
				<div class="icon">
					<span>用户评价</span>
					<div></div>
				</div>
				<ul>
					<li>
						<img src="img/user/1.jpg" alt="">
						<p>你好，这是你好评！</p>
						<p>2022-3-2</p>
						<textarea name="" id="" cols="40" rows="1">回复：</textarea>
					</li>
					<li>
						<img src="img/user/2.jpg" alt="">
						<p>你好，这是你好评！</p>
						<p>2033-1-1</p>
						<textarea name="" id="" cols="40" rows="1">回复：</textarea>
					</li>
				</ul>
			</div>
		</div>
		<div class="foot">
			<iframe src="foot.html" frameborder="0" width="100%" scrolling="no" height="300px"></iframe>
		</div>
	</body>
</html>
